<template>
    <div>
        <div class="search-term">
            <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
                <el-form-item>
                    <el-input
                            placeholder="订单号"
                            v-model="searchInfo.orderNo"
                            clearable
                            size="small"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input
                            placeholder="第三方支付单号"
                            v-model="searchInfo.outTradeNo"
                            clearable
                            size="small"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select
                            v-model="searchInfo.orderStatus"
                            placeholder="请选择订单状态"
                            clearable
                            size="small"
                    >
                        <el-option
                                v-for="item in orderOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <!--                <el-form-item>-->
                <!--                    <el-input-->
                <!--                            placeholder="退款单号"-->
                <!--                            v-model="searchInfo.accountName"-->
                <!--                            clearable-->
                <!--                            size="small"-->
                <!--                    ></el-input>-->
                <!--                </el-form-item>-->
                <!--                <el-form-item>-->
                <!--                    <el-input-->
                <!--                            placeholder="第三方退款单号"-->
                <!--                            v-model="searchInfo.accountName"-->
                <!--                            clearable-->
                <!--                            size="small"-->
                <!--                    ></el-input>-->
                <!--                </el-form-item>-->
                <el-form-item>
                    <el-button @click="onSubmit" type="primary" size="small"
                    >搜 索
                    </el-button
                    >
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="tableData" style="width: 100%;margin-bottom: 10px;" border>
            <el-table-column prop="orderNo" label="订单号" align="center">
            </el-table-column>
            <el-table-column prop="totalPrice" label="金额" align="center">
                <template slot-scope="scope">
                    {{scope.row.totalPrice /100}}
                </template>
            </el-table-column>
            <el-table-column prop="payChannel" label="支付方式" align="center">
                <template slot-scope="scope">
                    {{scope.row.payChannel === 0 ? "微信" : "无"}}
                </template>
            </el-table-column>
            <el-table-column prop="orderStatus" label="订单状态" align="center">
                <template slot-scope="scope">
                    <span>{{filterStatus(scope.row.orderStatus)}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" align="center">
            </el-table-column>
            <el-table-column fixed="right" label="操作" align="center" width="120px">
                <template slot-scope="scope">
                    <el-button
                            @click="viewOrderDetail(scope.row)"
                            size="small"
                            type="primary"
                            icon="el-icon-edit"

                    >订单详情
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                :current-page="currPage"
                :page-size="pageSize"
                :page-sizes="[10, 20, 30, 50, 100]"
                :style="{ float: 'right', padding: '20px' }"
                :total="totalCount"
                @current-change="handlepageChange"
                @size-change="handleSizeChange"
                layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
        <!--订单详情-->
        <el-dialog :before-close="closeOrderDialog" title="订单信息" :visible.sync="dialogFormVisible" class="dialogs">
            <el-form
                    :model="form"
                    :inline="true"
                    label-width="100px"
            >
                <el-divider content-position="left">学生信息</el-divider>
                <el-form-item label="学生名称" prop="username"><span>{{form.studentName}}</span></el-form-item>
                <el-form-item label="班级名称" prop="username"><span>{{form.studentClass}}</span></el-form-item>
                <el-form-item label="学校名称" prop="username"><span>{{form.schoolName}}</span></el-form-item>
                <el-form-item label="机构名称" prop="username" v-if="form.organName!==undefined">
                    <span>{{form.orgName}}</span>
                </el-form-item>
                <el-divider content-position="left">支付信息</el-divider>
                <el-form-item label="支付订单号" prop="areaId">
                    {{form.orderNo}}
                </el-form-item>
                <el-form-item label="支付金额" prop="address">
                    <span>{{form.totalPrice}}</span>
                </el-form-item>
                <el-form-item label="第三方单号" prop="mobile">
                    <span>{{form.wxTransactionId}}</span>
                </el-form-item>
                <el-form-item label="支付方式" prop="mobile">
                    <span>{{form.payChannel === 0 ? "微信" : "无"}}</span>
                </el-form-item>
                <el-form-item label="订单状态" prop="mobile">
                    <span>{{filterStatus(form.orderStatus)}}</span>
                </el-form-item>
                <el-form-item label="订单创建时间" prop="mobile">
                    <span>{{form.createTime}}</span>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    // 获取列表内容封装在mixins内部  getTableData方法 初始化已封装完成 条件搜索时候 请把条件安好后台定制的结构体字段 放到 this.searchInfo 中即可实现条件搜索
    import {orderList, orderDetail} from "@/api/order";
    import infoList from "@/components/mixins/infoList";

    export default {
        mixins: [infoList],
        data() {
            return {
                dialogFormVisible: false,
                options: [],
                listApi: orderList,
                searchInfo: {orderNo: '', orderStatus: '', outTradeNo: ''},
                btns: [],
                orderOptions: [{
                    value: 0,
                    label: "待付款",
                },
                    {
                        value: 1,
                        label: "待开班",
                    },
                    {
                        value: 2,
                        label: "已开班",
                    }, {
                        value: 3,
                        label: "已退款",
                    }, {
                        value: 4,
                        label: "已取消"
                    }, {
                        value: 5,
                        label: "退款中",
                    }],
                form: {}
            };
        },
        methods: {
            filterStatus(val) {//0待付款 1待开班 2已开班 3已退款 4已取消  5退款中
                switch (val) {
                    case 0:
                        return '待付款'
                    case 1:
                        return '待开班'
                    case 2:
                        return '已开班'
                    case 3:
                        return '已退款'
                    case 4:
                        return '已取消'
                    case 5:
                        return '退款中'
                    default:
                        break;
                }
            },
            closeOrderDialog() {
                this.dialogFormVisible = false;
            },
            //条件搜索前端看此方法
            onSubmit() {
                this.page = 1;
                this.pageSize = 10;
                this.getTableData();
            },
            async viewOrderDetail(row) {
                const res = await orderDetail(row.orderId)
                this.form = res.data
                this.dialogFormVisible = true;
            },
        },
        async created() {
            this.getTableData();
        },
    };
</script>
<style scoped lang="scss">
    .info {
        color: #409EFF;
    }

    .warning {
        color: #E6A23C;
    }

    .success {
        color: #67c23a;
    }

    .danger {
        color: #f56c6c;
    }

    .green {
        color: #67c23a;
    }

    .red {
        color: #f56c6c;
    }

    .button-box {
        // padding: 10px 20px;
        .el-button {
            float: right;
        }
    }

    .el-tag--mini {
        margin-left: 5px;
    }

    .dialogs {
        ::v-deep .el-input-group--append .el-input__inner {
            width: 170px !important;
        }

        ::v-deep .el-dialog__body {
            padding: 15px 20px 10px 20px;
        }

        ::v-deep .el-input__inner {
            width: 225px;
        }

        ::v-deep .el-textarea__inner {
            width: 225px;
        }

        .dialog-footer {
            text-align: center;
        }

        ::v-deep .el-input-number .el-input__inner {
            width: 130px;
        }

        ::v-deep .el-form .el-form-item {
            width: 49%;
            margin: 0;
        }

        ::v-deep .el-form .pics {
            width: 100%;
            margin-bottom: 22px;
        }

        ::v-deep .el-form .el-divider .el-divider__text {
            font-weight: bold;
            color: #409EFF;
        }

        ::v-deep .el-form .el-form-item .el-form-item__content {
            width: calc(100% - 112px)
        }

        ::v-deep .el-form .el-form-item .el-form-item__content .el-textarea__inner {
            width: 100%;
        }
    }

    .warning {
        color: #dc143c;
    }

    @import '../../style/punch-treeselect.css';
</style>
